<template>
	<div class="member-statistical">
		<list-title :data="header"></list-title>
		<div class="instance">
			<template>
				<el-select v-model="currAppid" placeholder="请选择实例" @change='changeApp'>
					<el-option
					v-for="item in instanceList"
					:key="item.appid"
					:label="item.label"
					:value="item.appid">
					</el-option>
				</el-select>
			</template>
		</div>
		<el-card class="box-card" shadow="hover" style="margin-top: 10px">
			<div slot="header">
				<b>今日数据</b>
			</div>
			<div class="today-data">
				<table>
					<tr>
						<td></td>
						<td>注册人数</td>
						<td>登录人数</td>
						<td>积分获取/使用</td>
					</tr>
					<tr>
						<td>今日</td>
						<td class="today">{{ dayData.todayAddCount }}</td>
						<td class="today">{{ dayData.todayLoginCount }}</td>
						<td class="today">{{ dayData.integralAddCount }}</td>
					</tr>
					<tr>
						<td>昨日</td>
						<td>{{ dayData.yesterdayAddCount }}</td>
						<td>{{ dayData.yesterdayLoginCount }}</td>
						<td>{{ dayData.integral1ReductionCount }}</td>
					</tr>
				</table>
			</div>
		</el-card>
		<div class="visualization">
			<div>
				<el-card class="box-card" shadow="hover" style="margin-top: 10px">
					<div slot="header">
						<b>平均每日登录</b>
					</div>
					<div>
						<div id="loginChart" :style="{width: '100%', height: '300px'}"></div>
					</div>
				</el-card>
				<el-card class="box-card" shadow="hover" style="margin-top: 10px">
					<div slot="header">
						<b>注册来源</b>
					</div>
					<div>
						<div id="sourceChart" :style="{width: '450px', height: '300px'}"></div>
					</div>
				</el-card>
			</div>
			<div>
				<el-card class="box-card" shadow="hover" style="margin-top: 10px">
					<div slot="header">
						<b>地域分布</b>
					</div>
					<div>
						<div id="areaChart" :style="{width: '500px', height: '300px'}"></div>
					</div>
				</el-card>
				<el-card class="box-card" shadow="hover" style="margin-top: 10px">
					<div slot="header">
						<b>性别比例</b>
					</div>
					<div>
						<div id="sexChart" :style="{width: '500px', height: '300px'}"></div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import echarts from 'echarts'
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)

export default {
	data() {
		return {
			/*头部数据*/
			header: {
				title: '数据统计',
				reload: true,
			},
			instanceList: [
				// {
				// 	appid: '111',
				// 	label: '东海期货'
				// },
				// {
				// 	appid: '222',
				// 	label: '东海证券'
				// }
			],
			currAppid: '',//当前选中的appid
			msg: 'welcome',
			dayData: {
				'todayAddCount': 0,//今天注册人数
				'yesterdayAddCount': 0,//昨天注册人数
				'todayLoginCount': 0,//今天登录人数
				'yesterdayLoginCount': 0,//昨天登录人数
				'integralAddCount': 0,//今天积分派发总数
				'integral1ReductionCount': 0,//昨天积分派发总数
			},
			sexOption: {//性别数据
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					left: 0,
					data: ['男', '女', '保密']
				},
				series: [
					{
						name: '性别比例',//系列名称
						type: 'pie',
						radius: ['50%', '70%'],//[内半径， 外半径]
						avoidLabelOverlap: false,//是否启用防止标签重叠策略
						emphasis: {
							label: {
								show: true,
								fontSize: '30',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: true
						},
						data: [
							{value: 0, name: '男', itemStyle: {color: '#56a1dc'}},
							{value: 0, name: '女', itemStyle: {color: '#d35fb0'}},
							{value: 0, name: '保密', itemStyle: {color: '#d6d6d6'}},
						]
					}
				]
			},
			areaOption: {
				title: {
					show: false,
					text: '中国地图',
					subtext: '数据纯属虚构',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},

				//左侧小导航图标
				visualMap: {
					min: 0,
					max: 0,
					left: 'left',
					top: 'middle',
					text: ['高', '低'],
					calculable: true,
					// color: ['#68a0de', '#fff']//线性颜色
				},
				//工具箱组件  右侧小导航
				toolbox: {
					show: true,
					orient: 'vertical',
					left: 'right',
					top: 'center',
					feature: {
						mark: {show: true},
						dataView: {show: true, readOnly: true},
						restore: {show: true},//显示刷新
						saveAsImage: {show: false}//不显示下载图片
					},
				},
				series: [
					{
						name: '地域分布',
						type: 'map',
						mapType: 'china',
						roam: false,
						label: {
							normal: {
								show: false,//不显示省份文字
							},
							emphasis: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								borderColor: '#efefef',//描边
								borderWidth: 1,
								areaColor: 'rgba(65, 82, 245, 0.2)',
								// shadowColor: 'rgba(51, 69, 255, 0.5)',
								// shadowBlur: 10
							},
							emphasis: {
								areaColor: 'rgba(104, 160, 222, 0.5)',//鼠标悬浮颜色
							}
						},
						data: [
							{name: '北京', value: 0},
							{name: '天津', value: 0},
							{name: '上海', value: 0},
							{name: '重庆', value: 0},
							{name: '河北', value: 0},
							{name: '河南', value: 0},
							{name: '云南', value: 0},
							{name: '辽宁', value: 0},
							{name: '黑龙江', value: 0},
							{name: '湖南', value: 0},
							{name: '安徽', value: 0},
							{name: '山东', value: 0},
							{name: '新疆', value: 0},
							{name: '江苏', value: 0},
							{name: '浙江', value: 0},
							{name: '江西', value: 0},
							{name: '湖北', value: 0},
							{name: '广西', value: 0},
							{name: '甘肃', value: 0},
							{name: '山西', value: 0},
							{name: '内蒙古', value: 0},
							{name: '陕西', value: 0},
							{name: '吉林', value: 0},
							{name: '福建', value: 0},
							{name: '贵州', value: 0},
							{name: '广东', value: 0},
							{name: '青海', value: 0},
							{name: '西藏', value: 0},
							{name: '四川', value: 0},
							{name: '宁夏', value: 0},
							{name: '海南', value: 0},
							{name: '台湾', value: 0},
							{name: '香港', value: 0},
							{name: '澳门', value: 0},
							{name: '南海诸岛', value: 0}
						]
					}
				]
			},
			sourceOption: {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					bottom: 0,
					left: 'center',
					data: ['PC端', '移动端']
				},
				series: [
					{
						name: '注册来源',//系列名称
						type: 'pie',
						radius: ['50%', '70%'],//[内半径， 外半径]
						avoidLabelOverlap: false,//是否启用防止标签重叠策略
						emphasis: {
							label: {
								show: true,
								fontSize: '30',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: true
						},
						data: [
							{value: 0, name: 'PC端', itemStyle: {color: '#56a1dc'}},
							{value: 0, name: '移动端', itemStyle: {color: '#68dec1'}},
						]
					}
				]
			},
			loginOption: {
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {// 坐标轴指示器，坐标轴触发有效
						type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					top: '15%',
					bottom: '5%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					splitLine: {show: false},
					axisLine: {
						lineStyle: {
							color: '#666'
						}
					},
					data: ['0次', '1次', '2次', '3次', '4次', '5次', '6次', '7次', '8次以上']
				},
				yAxis: {
					type: 'value',
					axisLine: {
						lineStyle: {
							color: '#999'
						}
					},
				},
				series: [
					{
						name: '总数',
						type: 'bar',
						stack: '总量',
						label: {
							show: true,
							position: 'top'
						},
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0]
					}
				]
			}

		};
	},
	// mounted(){
	// 	this.drawSex()
	// },
	components: {
		ListTitle,
		ListTable,
	},
	created: function() {
		/*获取列表数据*/
		this.getInstanceList()
	},
	methods: {
		/*获取实例列表*/
		getInstanceList: function(){
			if(this.$api.openList != undefined){			
				this.$baseURL(this.$domain.ac)
				this.$get(this.$api.openList).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.currAppid = res.data.data[res.data.data.length-1].appid
							/*获取可视化图表数据*/
							this.getStatisticalData()

							this.instanceList = []
							Object.keys(res.data.data).forEach((k) => {
								this.instanceList.push ({
									label: res.data.data[k].app_name,
									appid: res.data.data[k].appid,
								});
							})
						}
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}else{
				this.$message({
					showClose: true,
					message: '没有已开通实例列表的权限',
					type: 'error'
				});
			}
		},
		/*可视化图表数据*/
		getStatisticalData: function(){
			if(this.$api.memberStatistical != undefined){
				this.$baseURL(this.$domain.ac)
				this.$post(this.$api.memberStatistical, {
					appid: this.currAppid,
				}).then(res => {
					// console.log(res.data.data);
					if(res.data.code === 0){

						/*当日数据*/
						this.dayData.todayAddCount = res.data.data.day.todayAddCount
						this.dayData.yesterdayAddCount = res.data.data.day.yesterdayAddCount
						this.dayData.todayLoginCount = res.data.data.day.todayLoginCount
						this.dayData.yesterdayLoginCount = res.data.data.day.yesterdayLoginCount

						/*地域*/
						this.areaOption.visualMap.max = 0//初始化
						for(let i = 0; i < this.areaOption.series[0].data.length-1; i++){//初始化
							this.areaOption.series[0].data[i].value = 0
						}
						if(res.data.data.area != undefined){
							Object.keys(res.data.data.area).forEach((k) => {
								this.areaOption.visualMap.max += parseInt(res.data.data.area[k])//追加最大值
							})
							for(let i = 0; i < this.areaOption.series[0].data.length-1; i++){
								let tmp = res.data.data.area[this.areaOption.series[0].data[i].name]
								if(tmp != undefined){
									this.areaOption.series[0].data[i].value = res.data.data.area[this.areaOption.series[0].data[i].name]
								}
							}
						}

						/*性别比例*/
						if(res.data.data.gender != undefined){
							this.sexOption.series[0].data[0].value = res.data.data.gender.male?res.data.data.gender.male:0
							this.sexOption.series[0].data[1].value = res.data.data.gender.female?res.data.data.gender.female:0
							this.sexOption.series[0].data[2].value = res.data.data.gender.secret?res.data.data.gender.secret:0
						}

						/*登录频率*/
						this.loginOption.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0]//初始化
						if(res.data.data.login != undefined){
							Object.keys(res.data.data.login).forEach((k) => {
								if(k < 8){
									this.loginOption.series[0].data[k] = res.data.data.login[k]
								}else{
									this.loginOption.series[0].data[8] += parseInt(res.data.data.login[k])
								}
							})
						}

						/*来源*/
						if(res.data.data.sources != undefined){
							this.sourceOption.series[0].data[0].value = res.data.data.sources.pc?res.data.data.sources.pc:0
							this.sourceOption.series[0].data[1].value = res.data.data.sources.mobile?res.data.data.sources.mobile:0
						}
					}

					this.drawSex()
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*可视化图表*/
		drawSex(){
			// 基于准备好的dom，初始化echarts实例
			let sexChart = echarts.init(document.getElementById('sexChart'))
			let sourceChart = echarts.init(document.getElementById('sourceChart'))
			let areaChart = echarts.init(document.getElementById('areaChart'))
			let loginChart = echarts.init(document.getElementById('loginChart'))

			sexChart.setOption(this.sexOption);
			sourceChart.setOption(this.sourceOption);
			areaChart.setOption(this.areaOption);
			loginChart.setOption(this.loginOption);
		},
		/*重新选择应用*/
		changeApp: function(){
			/*获取列表数据*/
			this.getStatisticalData()
		}
	},
	computed: {
		
	}
};
</script>

<style lang="stylus" scoped>
.member-statistical
	position: relative
	.instance
		position: absolute
		top: 0px
		left: 100px
		/deep/ .el-input__inner
			border: none !important
	.visualization
		display: flex
		>div
			flex: 1
		>div:nth-child(1)
			padding-right: 5px
		>div:nth-child(2)
			padding-left: 5px
		#sexChart, #sourceChart, #areaChart, #loginChart
			margin: auto
	.today-data
		table
			width: 100%
			font-size: 0
			td
				font-size: 12px
				line-height: 28px
				display: inline-block
				width: 25%
				text-align: left
				border-left: 1px #eceef5 solid
				padding-left: 20px
			tr
				.today
					font-size: 20px
					font-weight: bold
				td:nth-child(1)
					width: 150px
					padding-left: 0
					border: 0
/deep/ h4/*地图的数据视图*/
	margin-left: 0 !important
	+div
		textarea
			padding: 10px
			border-color: #999 !important
			color: #666 !important
</style>